<template>
	<view class="container" :style="{marginTop:h}">
		<view class="nav" :style="{height:h}">
			<view class="n-sub">
				<text>{{addr}}</text>
				<image :src="src" mode="widthFix"></image>
			</view>
		</view>
		<view class="content">
			<view class="c-box">
				<view class="c-box-title">
					工作
				</view>
				<view class="c-box-body">
					<view class="c-box-body-item" @click="onNavTo('../../work/DailyReport/DailyReportList')">
						<view class="c-box-body-item-img">
							<image src="@/static/images/icons/icon-day.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							日报
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../work/WeeklyReport/WeeklyReportList')">
						<view class="c-box-body-item-img f-01">
							<image src="@/static/images/icons/icon-week.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							周报
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../work/MonthlyReport/MonthlyRepList')">
						<view class="c-box-body-item-img">
							<image src="@/static/images/icons/icon-04.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							月报
						</view>
					</view>
				</view>
			</view>
			<view class="c-box">
				<view class="c-box-title">
					常用
				</view>
				<view class="c-box-body">
					<view class="c-box-body-item" @click="onNavTo('../../oa/Clockin/ClockinNew')">
						<view class="c-box-body-item-img">
							<image src="@/static/images/icons/icon-date.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							考勤打卡
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../oa/Clockin/ClockWifiList')">
						<view class="c-box-body-item-img f-03">
							<image src="@/static/images/icons/icon-set.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							打卡设置
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../oa/Leaves/LeavesNew')">
						<view class="c-box-body-item-img">
							<image src="@/static/images/icons/icon-05.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							请假
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../oa/Travel/TravelNew')">
						<view class="c-box-body-item-img f-02">
							<image src="@/static/images/icons/icon-06.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							出差
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../oa/Overtime/OvertimeNew')">
						<view class="c-box-body-item-img f-01">
							<image src="@/static/images/icons/icon-07.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							加班
						</view>
					</view>
					<view class="c-box-body-item" @click="onNavTo('../../oa/Officialout/OfficialoutNew')">
						<view class="c-box-body-item-img f-02">
							<image src="@/static/images/icons/icon-08.png" mode="widthFix"></image>
						</view>
						<view class="c-box-body-item-tip">
							公出
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addr: "...",
				h: "50px",
				src: "/static/images/icons/icon-scode.png"
			}
		},
		methods:{
			onNavTo(url){
				if(url.trim().length>0){
					uni.navigateTo({
						url:url
					})
				}else{
					uni.showToast({
						title:"正在开发中..."
					})
				}
			}
		},
		onLoad() {
			let userLoginData = JSON.parse(uni.getStorageSync("userLoginData"));
			this.addr = userLoginData.OrgName;
			uni.getSystemInfo({
				success: (res) => {
					this.h = res.statusBarHeight + 44 + "px";
				}
			})
		}
	}
</script>

<style>
	.content {
		padding: 8px;
		background-color: #FFFFFF;
	}

	.c-box {
		border: solid 0rpx blue;
	}

	.c-box-title {
		font-weight: 700;
		padding: 16rpx 0;
		font-size: 15px;
		border-bottom: solid 2rpx #dbdbdb;
	}

	.c-box-body {
		border: solid 0rpx blue;
		justify-content: space-between;
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
	}

	.c-box-body:after {
		content: "";
		height: 0;
		width: 30%;
	}

	.c-box-body-item {
		margin: 30rpx 30rpx 0 30rpx;
		border: solid 0rpx red;
	}

	.c-box-body-item-tip {
		text-align: center;
	}

	.c-box-body-item image {
		width: 40px;
	}

	.c-box-body-item-img {
		display: flex;
		width: 60px;
		height: 60px;
		background-color: #3396fb;
		align-items: center;
		justify-content: center;
		border-radius: 26px;
	}

	.f-01 {
		background-color: #f59b53;
	}

	.f-02 {
		background-color: #17ba82;
	}
	
	.f-03{
		background-color: #f86255;
	}
</style>
